import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    Layout.fillWidth: true
    Layout.fillHeight: true

    Column {
        spacing: 10
        width: 600
        height: 400

        TextField {
            id: searchField
            width: parent.width
            placeholderText: "输入搜索内容..."
            // 当搜索框文本变化时，触发TextArea的高亮函数
            onTextChanged: searchableTextArea.highlightSearchResults()
        }

        TextArea {
            id: searchableTextArea
            width: parent.width
            height: parent.height - searchField.height - 10
            text: "这是一个可以搜索的文本区域。\n尝试在上面的搜索框中输入文本，匹配的内容将会高亮显示。\nTextArea控件非常适合实现文本编辑和查看功能。"
            selectByMouse: true // 允许鼠标选择文本

            // 设置选中文本的背景颜色，用于高亮
            selectionColor: "#FFEB3B"

            // 定义高亮搜索结果的函数
            function highlightSearchResults() {
                // 首先清除之前的所有选择/高亮
                select(0, 0)

                // 如果搜索框为空，则不进行任何操作
                if (searchField.text === "") {
                    return
                }

                var searchText = searchField.text
                var content = text
                var pos = 0

                // 循环查找所有匹配项
                while (true) {
                    // 使用indexOf进行不区分大小写的搜索
                    // 注意：实际应用中可能需要更健壮的搜索逻辑
                    pos = content.toLowerCase().indexOf(searchText.toLowerCase(), pos)
                    if (pos === -1) break // 没有找到更多匹配项

                    // 使用TextArea的select方法选中找到的文本，实现高亮效果
                    select(pos, pos + searchText.length)

                    // 从当前匹配项之后继续搜索
                    pos += searchText.length
                }
            }
        }
    }
}
